@for (tile of cardDocs(); track tile.id; let i = $index) {
    <div
        class="flex flex-col p-2.5 gap-2.5 bg-dark/[.02] rounded-15px"
        [class]="
            activeCardId() === tile.id ? 'border border-solid border-yellow bg-yellow/[.05]' : ''
        "
        [id]="tile.id"
        #cards>
        <div class="ml-4 flex items-center text-title text-dark uppercase tracking-[.25em]">
            {{ tile.header }}
        </div>

        <div class="flex gap-30px mob:flex-col mob:gap-15px scroll-mt-[185px]" [id]="tile.anchor">
            <div class="flex-[55%] rounded-10px bg-full-white p-15px">
                <div class="flex items-start gap-2.5 mb-5">
                    <img
                        width="20"
                        height="20"
                        [ngSrc]="'hand-box' | asset: openSourceOptionsPath"
                        alt="Hand with box" />
                    <span class="text-span text-dark/[.25]">Usage</span>
                </div>
                <span class="uppercase tracking-[.25em] text-span text-dark/[.45]"
                    >Source code</span
                >
                <div class="block mt-2.5">
                    <pre class="flex text-span">
                        <code [highlight]="tile.code" language="html" class="bg-white w-full h-fit pl-15px rounded-10px border-none overflow-hidden whitespace-pre-line"></code>
                        <img height="18" width="13" [ngSrc]="'input-vector' | asset : openSourceOptionsPath" class="relative right-5 self-center" alt="Input vector" />
                    </pre>
                </div>
            </div>
            <ng-container
                *ngTemplateOutlet="
                    exampleTmpl;
                    context: { $implicit: cardExamples()?.[i], placeholder: tile.header }
                " />
        </div>
    </div>
}

<ng-template #exampleTmpl let-ex let-placeholder="placeholder">
    <div class="flex-[45%] rounded-10px p-15px bg-black">
        <ng-container
            *ngTemplateOutlet="
                !ex._pipe ? inputTemplate : pipeTemplate;
                context: { $implicit: ex, placeholder: placeholder }
            " />
    </div>
</ng-template>

<ng-template #inputTemplate let-ex let-placeholder="placeholder">
    <div class="flex">
        <input
            [placeholder]="placeholder || ''"
            [placeHolderCharacter]="ex._placholderCharacter || '_'"
            [prefix]="ex._prefix || ''"
            [suffix]="ex._suffix || ''"
            [dropSpecialCharacters]="ex._dropSpecialCharacters ?? true"
            [mask]="ex._mask || ''"
            [thousandSeparator]="ex._thousandSeparator || ' '"
            [formControl]="ex.control.form"
            [allowNegativeNumbers]="ex._allowNegativeNumbers || null"
            [specialCharacters]="ex._specialCharacters || specialCharacters"
            [shownMaskExpression]="ex._shownMaskExpression"
            [(ngModel)]="ex.control.model"
            [apm]="ex._apm || false"
            [decimalMarker]="ex._decimalMarker || '.'"
            [leadZero]="ex._leadZero || false"
            [keepCharacterPositions]="ex._keepCharacterPositions || false"
            [validation]="ex._validation || false"
            [showMaskTyped]="ex._showMaskTyped || false"
            [clearIfNotMatch]="ex._clearIfNotMatch"
            [hiddenInput]="ex._hiddenInput || null"
            [outputTransformFn]="ex._outputTransformFn || outputTransformFn"
            [inputTransformFn]="ex._inputTransformFn || inputTransformFn"
            class="w-full h-[51px] placeholder:text-white/25 text-full-white py-3 px-5 outline-none bg-black border-b-2px border-b-white rounded-10px focus:border-b-yellow hover:border-b-yellow hover:bg-full-white/25 focus:bg-full-white/25" />
    </div>
    <div class="flex gap-50px">
        <jsdaddy-open-source-card-content
            [value]="ex.control.form.value | isEmpty"
            title="Form Control:"
            color="yellow-view" />
        <jsdaddy-open-source-card-content
            [value]="ex.control.model | isEmpty"
            title="Ng Model:"
            color="yellow-view" />
    </div>
    <jsdaddy-open-source-card-content [value]="ex._mask" title="Mask:" color="green-view" />
    @if (ex._validation) {
        <jsdaddy-open-source-card-content
            [value]="ex.control.form.errors | json"
            title="Mask error:"
            color="yellow-view" />
    }
</ng-template>

<ng-template #pipeTemplate>
    <jsdaddy-open-source-card-content [value]="phone | mask: '(000) 000-0000'" title="" color="" />
    <jsdaddy-open-source-card-content value="(000) 000-0000" title="Mask:" color="green-view" />
    <jsdaddy-open-source-card-content value="123456789" title="Value:" color="green-view" />
</ng-template>
